<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index1.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2802339_75bm3n29x44.css?spm=a313x.7781069.1998910419.42&file=font_2802339_75bm3n29x44.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2802339_rv2mhftxff.css?spm=a313x.7781069.1998910419.45&file=font_2802339_rv2mhftxff.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/first-screen.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/index.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/feed.chunk.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/index1.js"></script>
    <style>
        body {
            background-color: #f4f4f4;
        }

        .lazyimg_img {
            opacity: 1;
        }

        .searchList {
            width: 450px;
            position: absolute;
            top: 80px;
            background-color: white;
            border: 1px solid grey;
            z-index: 9999;
            display: none;
        }

        .searchList li {
            line-height: 32px;
            text-indent: 10px;
            font-size: 14px;
            color: black;
        }

        .searchList li:hover {
            color: white;
            background-color: skyblue;

        }
    </style>
</head>

<body>
    <!-- 哈哈哈哈111 -->
    <header>
        <div class="header">
            <div class="left">
                <ul class="heardeleft">
                    <li>网站导航</li>
                    <li>商家入驻</li>
                    <li>客户服务</li>
                    <li>网页无障碍</li>
                </ul>
                <span class="iconfont">&#xe645;</span>
                <select>
                    <option value="武汉">武汉</option>
                    <option value="郑州">郑州</option>
                </select>
            </div>
            <div class="right">
                <ul>
                    <div class="show">
                        <a href="./login_account.html">
                            <li>请登录</li>
                        </a>
                        <a href="./resigter.html">
                            <li>注册有礼</li>
                        </a>
                    </div>
                    <div class="hide">
                        <a href="javascript:;" class="tips">欢迎:xxx</a>
                        <a href="javascript:;" class="a1">退出</a><br>
                    </div>
                    <li>我的订单</li>
                    <li>我的易购</li>
                    <li>苏宁会员</li>
                    <a href="javascript:;">
                        <li class="shoptocar">购物车</li>
                    </a>
                    <li>易付宝</li>
                    <li>企业采购</li>
                    <li>手机苏宁</li>
                </ul>
            </div>
        </div>
    </header>
    <div id="nav">
        <nav>
            <div class="navleft">
                <img src="../img/159642507148437980.png" alt="">
            </div>
            <div class="navright">
                <form onsubmit="return false">
                    <div class="searchBox">
                        <input type="text" class="searchCon" placeholder="商品搜索">
                        <ul class="searchList"></ul>
                        <button class="searchBtn">搜索</button>
                    </div>
                </form>
                <div class="navlist">
                    <ul>
                        <li>奶粉特惠购</li>
                        <li>品质家具购</li>
                        <li>风管机</li>
                        <li>手机</li>
                        <li>冰箱</li>
                        <li>电视</li>
                        <li>空调</li>
                        <li>空调热卖抢</li>
                        <li>取暖器</li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="wrap">
        <div class="wrapnav">
            <li class="l1"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
        <div class="wrapright iconfont">&#xe625;</div>
        <div class="wrapleft iconfont">&#xe8b5;</div>
        <div class="box">
            <a href="" class="a1"><img src="../img/icon1.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon2.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon3.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon5.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon6.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon7.jpg" alt=""></a>
            <a href="" class="a1"><img src="../img/icon1.jpg" alt=""></a>
        </div>

        <div class="contain">
            <div class="bannerleft">
                <div class="bannertop">
                    <span>分类</span>
                </div>
                <div class="bannerbuttom">
                    <ul>
                        <li>
                            <img src="../img/xiao9.png" alt=""><span>手机/运营商/智能数码</span>
                        </li>
                        <li>
                            <img src="../img/xiao10.png" alt=""><span>家用电器/帮客</span>
                        </li>
                        <li>
                            <img src="../img/xiao1.png" alt=""><span>厨卫/生活家电/厨具</span>
                        </li>
                        <li>
                            <img src="../img/xiao2.png" alt=""><span>家具/家装/家纺/灯具</span>
                        </li>
                        <li>
                            <img src="../img/xiao3.png" alt=""><span>食品/酒水/生鲜/特产</span>
                        </li>
                        <li>
                            <img src="../img/xiao4.png" alt=""><span>美妆/个护/清洁/宠物</span>
                        </li>
                        <li>
                            <img src="../img/xiao6.png" alt=""><span>女装/男装/内衣/鞋靴</span>
                        </li>
                        <li>
                            <img src="../img/xiao5.png" alt=""><span>母婴/玩具/车床/童装</span>
                        </li>
                        <li>
                            <img src="../img/xiao7.png" alt=""><span>医药健康/计生情趣</span>
                        </li>
                        <li>
                            <img src="../img/xiao8.png" alt=""><span>理财/分期/便民</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bannercenter">
                <a href=""><img src="../img/tiao11.png" alt=""></a>
                <a href=""><img src="../img/tiao13.png" alt=""></a>
                <a href=""><img src="../img/tiao14.png" alt=""></a>
                <a href=""><img src="../img/tiao15.png" alt=""></a>
            </div>
            <div class="bannerright">
                <div class="righttop">
                    <img src="../img/a1.png" alt="">
                </div>
                <div class="rightbuttom">
                    <div class="q1">
                        <img src="../img/log1.png" alt="">
                        <div>
                            <span>Hi，欢迎来到苏宁易购</span>
                            <span><a href="./login_account.html">登录</a><a href="./resigter.html">注册</a></span>
                        </div>
                    </div>
                    <button>199新人专享</button>
                    <button>开通super尊亨特权</button>
                    <div class="q2">
                        <p>
                            <img src="../img/w11.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w12.png" alt=""><a href="">领云钻</a>
                        </p>
                        <p>
                            <img src="../img/w13.png" alt=""><a href="">抢神券</a>
                        </p>
                    </div>
                    <div class="q3">
                        <p>
                            <img src="../img/w14.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w15.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w16.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w17.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w18.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w19.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w110.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w21.png" alt=""><a href="">领红包</a>
                        </p>
                        <p>
                            <img src="../img/w22.png" alt=""><a href="">领红包</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main">
        <main>
            <div class="mainleft">
                <p><img src="../img/o1.png" alt=""><span></span></p>
                <div>
                    <li>
                        <a href="">
                            <img src="../img/e1.png" alt="">
                        </a>
                        <p class="info">[满55减10]逸飞 添加13%初榨橄榄油食用调和油5L 食用油家用炒菜油 5000ml</p>
                        <p class="price">￥<span>89.90</span> </p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/e2.jpg" alt="">
                        </a>
                        <p class="info">【现挖现发】鼓员香 2.5斤装新鲜红薯地瓜沙地蜜薯番薯蔬菜坏果包赔</p>
                        <p class="price">￥<span>10.00</span> </p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/e3.jpg" alt="">
                        </a>
                        <p class="info">Dr.Jart+ 蒂佳婷 蓝色药丸 密集补水 面膜 5片/盒 清爽保湿 锁水保湿 韩国进口 雅诗兰黛家族</p>
                        <p class="price">￥<span>58.00</span> </p>
                    </li>
                </div>
            </div>
            <div class="mainright">
                <p><img src="../img/da.png" alt=""><span>抢品质好货</span></p>
                <div>
                    <li>
                        <a href="">
                            <img src="../img/c1.jpg" alt="">
                        </a>
                        <p class="info">MKQ63CH/A Apple Watch SE 44毫米 GPS版 深空灰色铝金属表壳午夜色运动型表带
                        <p class="price">￥<span>2399.00</span> </p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c2.jpg" alt="">
                        </a>
                        <p class="info">逸飞 小榨浓香花生油450mlx2瓶 宿舍用油 小瓶油
                        <p class="price">￥<span>39.00</span> </p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c3.jpg" alt="">
                        </a>
                        <p class="info">[店长力荐]林内(Rinnai) RUS-16QS41(JSQ31-S41)智能安全升级家用强排式 宽幅恒温燃气热水器
                        <p class="price">￥<span>3599.00</span> </p>
                    </li>
                </div>
            </div>
            <div class="mainleft1">
                <p>领券中心<span>抢大额神券</span></p>
                <div>
                    <li>
                        <a href="">
                            <img src="../img/c4.jpg" alt="">
                        </a>
                        <p class="info">满199用20</p>
                        <p class="info">限自营汽车品类部分商品</p>
                        <button>立即领取</button>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c5.jpg" alt="">
                        </a>
                        <p class="info">满199用20</p>
                        <p class="info">限自营汽车品类部分商品</p>
                        <button>立即领取</button>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c6.jpg" alt="">
                        </a>
                        <p class="info">满199用20</p>
                        <p class="info">限自营汽车品类部分商品</p>
                        <button>立即领取</button>
                    </li>
                </div>
            </div>
            <div class="mainright1">
                <p>推荐榜单<span>跟榜闭眼买</span></p>
                <div>
                    <li>
                        <a href="">
                            <img src="../img/c1.jpg" alt="">
                        </a>
                        <p class="info">时尚保鲜冰箱榜
                        <p class="price"><img src="../img/p1.png" alt="">品质好生活</p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c2.jpg" alt="">
                        </a>
                        <p class="info">时尚保鲜冰箱榜
                        <p class="price"><img src="../img/p1.png" alt="">品质好生活</p>
                    </li>
                    <li>
                        <a href="">
                            <img src="../img/c3.jpg" alt="">
                        </a>
                        <p class="info">时尚保鲜冰箱榜
                        <p class="price"><img src="../img/p1.png" alt="">品质好生活</p>
                    </li>
                </div>
            </div>
        </main>
    </div>
    <div class="square">
        <img src="../img/i1.png" alt="" class="m1">
        <div class="contain">
            <div>
                <li>
                    <p class="info"><span>苏宁家电</span><span>买家电上苏宁</span></p>
                    <a href="">
                        <img src="../img/m1.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m2.jpg" alt="">
                    </a>

                </li>
                <li>
                    <p class="info"><span>苏宁国际</span><span>快享全球好货</span></p>
                    <a href="">
                        <img src="../img/m3.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m4.jpg" alt="">
                    </a>

                </li>
                <li>
                    <p class="info"><span>母婴玩具</span><span>妈妈放心购</span></p>
                    <a href="">
                        <img src="../img/m5.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <p class="info"><span>生活家电</span><span>潮流小家电</span></p>
                    <a href="">
                        <img src="../img/m7.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m8.jpg" alt="">
                    </a>

                </li>
                <li>
                    <p class="info"><span>苏宁超市</span><span>为你挑好的</span></p>
                    <a href="">
                        <img src="../img/m9.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m10.jpg" alt="">
                    </a>

                </li>
                <li>
                    <p class="info"><span>服饰家纺</span><span>品质服饰</span></p>
                    <a href="">
                        <img src="../img/m11.jpg" alt="">
                    </a>
                    <a href="">
                        <img src="../img/m12.jpg" alt="">
                    </a>

                </li>
            </div>
        </div>
    </div>


    <div class="rem">
        <img src="../img/i2.png" alt="" class="m1">
        <div class="grid_c1 more2_inner" clstag="a">
            <div>
                <ul id="feedContent0" class="more2_list clearfix" role="tabpanel" aria-labelledby="feedTab0"></ul>
                <div class="more2_loading">
                    <em style="background-color: rgb(88, 88, 87);"></em>
                    <em style="background-color: rgb(150, 151, 150);"></em>
                    <em style="background-color: rgb(209, 210, 208);"></em>
                </div>
            </div>
        </div>

    </div>

    <div class="ng-ser-box">
        <div class="contain">
            <div class="ng-ser-box-top">
                <p>
                    <img src="../img/icon30.jpg" alt="">
                    <span>
                        <span>正品保障</span>
                        <span>正品保障、提供发票</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon31.jpg" alt="">
                    <span>
                        <span>急速物流</span>
                        <span>如约送货、送货入户</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon32.jpg" alt="">
                    <span>
                        <span>售后无忧</span>
                        <span>30天包退、365天包换</span>
                    </span>

                </p>
                <p>
                    <img src="../img/icon33.jpg" alt="">
                    <span>
                        <span>帮助中心</span>
                        <span>您的购物指南</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon34.png" alt="">
                    <span>
                        <span>省心购</span>
                        <span>专注好服务</span>
                    </span>
                </p>
            </div>
            <div class="ng-ser-box-buttom">
                <ul>
                    <li>购物指南</li>
                    <li>免费注册</li>
                    <li>会员等级</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>苏宁支付</li>
                    <li>网银支付</li>
                    <li>快捷支付</li>
                    <li>分期付款</li>
                    <li>货到付款</li>
                    <li>任性付支付</li>
                </ul>
                <ul>
                    <li>物流配送</li>
                    <li>运费政策</li>
                    <li>物流配送服务</li>
                    <li>签收验货</li>
                    <li>物流查询</li>
                </ul>
                <ul>
                    <li>售后服务</li>
                    <li>退换货政策</li>
                    <li>贵就赔</li>
                    <li>维修/安装</li>
                    <li>订单修改</li>
                    <li>退换货申请</li>
                    <li>我的发票</li>
                </ul>
                <ul>
                    <li>商家服务</li>
                    <li>合作招商</li>
                    <li>培训中心</li>
                    <li>广告服务</li>
                    <li>商家帮助</li>
                    <li>服务市场</li>
                    <li>规则中心</li>
                </ul>
                <ul>
                    <li>身边苏宁</li>
                    <li>全国300多个城市，上万个门店和服务终端期待您的光临，为您提供贴心的服务！</li>
                </ul>
            </div>
        </div>
    </div>

</body>

<script>

    $(".searchCon").on("input", function () {
        $(".searchList").css({ display: 'block' })
        var key = $(".searchCon").val();
        // 即时搜索功能=>每次输入关键词=>重新请求
        // 解决方法:动态生成script标签=>设置请求的路径=>当script标签放到页面中时会向src中接口发送请求=>接收返回的jsonp格式的数据
        var script = document.createElement("script")
        script.src = `https://suggest.taobao.com/sug?code=utf-8&q=${key}&_ksTS=1637032362137_481&callback=dong&k=1&area=c2c&bucketid=14`
        document.body.append(script);
        script.onload = function () {//请求成功=>数据=>等脚本中的数据载入完毕=>删除脚本
            script.remove();
        }

    })
    $(".searchCon").focus(function () {
        $(".searchList").css({ display: 'block' })
    })
    $(".searchCon").blur(function () {
        $(".searchList").css({ display: 'none' })
    })

    function dong(data) {
        var { result } = data
        var html = "";
        result.forEach(([q]) => {
            html += `<li>${q}</li>`
        })
        $(".searchList").html(html);
    }

</script>


</html>